<template>
  <div class="app-container home">
    <el-card class="update-log">
      <div slot="header" class="clearfix">
        <span>套餐列表</span>
      </div>
      <el-table v-loading="loading" :data="combos" row-key="id" default-expand-all>
        <el-table-column width="60" label="操作" fixed="left">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showUpdataConbo(scope.row)">修改套餐</el-button>
          </template>
        </el-table-column>
        <el-table-column width="120" label="套餐编号" align="center" prop="id"/>
        <el-table-column width="100" label="名称" align="center" prop="name"/>
        <el-table-column width="80" label="售价" align="center" prop="price"/>
        <el-table-column width="100" label="套餐额度" align="center" prop="amount"/>
        <el-table-column width="120" label="有效时长（天）" align="center" prop="usefulDays"/>
        <el-table-column width="160" label="更新时间" align="center" prop="updataTime"/>
        <el-table-column width="300" label="此套餐下各收费点" align="center" type="expand">
          <template slot-scope="scope">
            <el-row type="flex" justify="end">
              <el-col v-for="(item, index) in scope.row.costItemList" :span="2" style="margin-left: 40px">
                <div class="grid-content bg-purple">
                  <p>
                    {{ item.costName + item.price }}
                    <el-button
                      type="primary"
                      size="mini"
                      @click="showUpdataPrice(scope.row, item)">修改
                    </el-button>
                  </p>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog :title="title" :visible.sync="isShow" width="360px">
      {{ costItem.costName }}
      <el-input v-model="costItem.price" style="width: 180px"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updataPrice()">确 定</el-button>
        <el-button @click="isShow=!isShow">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="isConboShow">
      <el-form :model="item" size="medium" label-width="70px">
        <el-form-item label="价格">
          <el-input v-model="item.price" placeholder="请输入价格" clearable></el-input>
        </el-form-item>
        <el-form-item label="可用额度">
          <el-input v-model="item.amount" placeholder="请输入可用额度" clearable></el-input>
        </el-form-item>
        <el-form-item label="可用天数">
          <el-input v-model="item.usefulDays" placeholder="可用天数" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isConboShow=!isConboShow">取消</el-button>
        <el-button type="primary" @click="updataConbo()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getLP, getCombos, updataCombo, updataCostItem} from "@/api/weiChat";

  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        combos: [],
        loading: true,

        title: '',
        isShow: false,
        isConboShow: false,

        item: {
          id: null,
          price: null,
          amount: null,
          usefulDays: null
        },
        costItem: {
          costName: '',
          price: null
        }
      }
    },
    created() {
      if (Cookies.get('jfT') == undefined) {
        getLP().then(res => {
          Cookies.set('jfT', res.data)
        })
      }
      this.getCombos()
    },

    methods: {
      getCombos() {
        this.loading = true
        getCombos({
          type: '综合套餐',
          enable: '1'
        }).then((res) => {
          if (res.code == 1000) {
            this.combos = res.data
          }
          this.loading = false
        })
      },

      showUpdataPrice(item, costItem) {
        this.item = item
        this.costItem = costItem
        this.title = item.name + ' 的 ' + costItem.costName + ' 价格'
        this.isShow = true
      },

      updataPrice() {
        updataCostItem({
          id: this.costItem.id,
          price: this.costItem.price
        }, Cookies.get('jfT')).then((res) => {
          if (res.code == 1000) {
            this.$modal.msgSuccess("修改成功")
            this.getCombos()
            this.isShow = false
          }
        })
      },

      showUpdataConbo(item) {
        this.item = item
        this.title = '修改' + item.name
        this.isConboShow = true
      },

      updataConbo() {
        const item = this.item
        delete item.costItemList
        delete item.updataTime
        updataCombo(item, Cookies.get('jfT')).then((res) => {
          if (res.code == 1000) {
            this.$modal.msgSuccess("修改成功")
            this.getCombos()
            this.isConboShow = false
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

